<template lang="pug">
  div.tabContent
    el-card(:bodyStyle="{padding: 0}")
      .tableFilter
        div(slot="header" class="boxHeader") 违规视频库信息查询
        form-box(
          style="padding: 0 10px 10px 10px"
          :items="filterItems"
          :isFilter="true"
          :searchHandle="searchHandle"
        )
    el-card.tableInnerWrapper.mt12(id="tableInnerWrapper")
      div(slot="header" class="boxHeader")
        h2 违规视频库信息列表
        .table-operator
          el-button(size="small" type="success" @click="addVisible = true") 添加视频
    voilate-add-modal(:visible.sync="addVisible" @getList="refreshTable")
</template>
<script>
import { FormBox } from '@/components'
import { volaVideoList } from '@/api/libary'
import VoilateAddModal from './VoilateAddModal'
import { tableDom } from '@/core/mixins'

export default {
  components: {
    FormBox,
    VoilateAddModal
  },
  mixins: [tableDom],
  computed: {
    filterItems () {
      return [
        {
          key: 'volaType',
          label: '违规类型',
          type: 'selectdict',
          dictKey: 'SCEN_VOLA_TYPE'
        },
        {
          key: 'orgIdString',
          label: '所在机构',
          type: 'orgselect'
        },
        {
          key: 'cutWay',
          label: '截取方式',
          type: 'selectdict',
          dictKey: 'SCEN_CUT_WAY'
        },
        {
          key: 'videoBegntime',
          label: '发生日期',
          type: 'date'
        }
      ]
    }
  },
  data () {
    return {
      addVisible: false,
      searchValue: null,
      pagination: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      list: []
    }
  },
  created () {
    this.getData()
  },
  methods: {
    // 刷新表格
    refreshTable (flag = false) {
      this.$refs.table.refresh(flag)
    },
    searchHandle (vals) {
      console.log(vals)
      this.searchValue = vals
      this.getData(1)
    },
    // 获取列表
    getData (pageNum = this.pagination.page) {
      volaVideoList({ pageNum, pageSize: this.pagination.pageSize }, { ...this.searchValue }).then(res => {
        console.log(res)
        this.list = res.records || []
        this.pagination = Object.assign(this.pagination, {
          total: res.total,
          page: res.pageNum
        })
      })
    }
  }
}
</script>
